<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>Musik | Web Application</title>
<meta name="description"
	content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="js/jPlayer/jplayer.flat.css"
	type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
<!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
<style type="text/css">
div span {
	margin: 0 auto;
	display: block;
	text-align: center;
	padding-top: 10px;
}
</style>
</head>
<body class="bg-info dker">
	<section id="content" class="m-t-lg wrapper-md animated fadeInDown">
		<div class="container aside-xl">
			<a class="navbar-brand block" href="index.html"><span
				class="h1 font-bold">Musik</span></a>
			<section class="m-b-lg">
				<header class="wrapper text-center">
					<strong>Sign up to find interesting thing</strong>
				</header>
				<!-- 表单 -->
				<form action="userServlet" method="post">
					<!-- 用户名 -->
					<div class="form-group">
						<input placeholder="Name" name="username" id="name"
							onfocus="clearUsernameMsg();"
							class="form-control rounded input-lg text-center no-border">
						<span id="name_regist_span"></span>
					</div>
					<!-- 邮箱 -->
					<div class="form-group">
						<input type="email" placeholder="Email" name="email" id="email"
							onfocus="clearEmailMsg();"
							class="form-control rounded input-lg text-center no-border">
						<span id="emial_regist_span"></span>
					</div>
					<!-- 密码 -->
					<div class="form-group">
						<input type="password" placeholder="Password" name="password"
							id="password"
							class="form-control rounded input-lg text-center no-border">
					</div>
					<!-- 确认密码 -->
					<div class="form-group">
						<input type="password" placeholder="Confirm Password"
							name="confpassword" id="confpassword"
							class="form-control rounded input-lg text-center no-border">
						<span id="pass_span"></span>
					</div>
					<!-- 隐藏域 -->
					<div class="form-group">
						<input type="hidden" name="type" value="regist" id="hideflag"
							class="form-control rounded input-lg text-center no-border">
					</div>
					<div class="checkbox i-checks m-b">
						<label class="m-l"> <input type="checkbox" checked=""><i></i>
							Agree the <a href="#">terms and policy</a>
						</label>
					</div>
					<button type="submit"
						class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded">
						<i class="icon-arrow-right pull-right"></i><span class="m-r-n-lg">Sign
							up</span>
					</button>
					<div class="line line-dashed"></div>
					<p class="text-muted text-center">
						<small>Already have an account?</small>
					</p>
					<a href="login.jsp"
						class="btn btn-lg btn-info btn-block btn-rounded">Sign in</a>
				</form>
			</section>
		</div>
	</section>
	<!-- footer -->
	<footer id="footer">
		<div class="text-center padder clearfix">
			<p>
				<small>Web app framework base on Bootstrap<br>&copy;
					2014
				</small>
			</p>
		</div>
	</footer>
	<!-- / footer -->
	<script src="js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.js"></script>
	<!-- App -->
	<script src="js/app.js"></script>
	<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="js/app.plugin.js"></script>
	<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
	<script type="text/javascript"
		src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
	<script type="text/javascript" src="js/jPlayer/demo.js"></script>
	<script>
		$(function() {
			var usernameFlag = false;
			var passwordFlag = false;
			var emailFlag = false;

			$("#email").blur(function() {
				var email = $("#email").val();
				//发送异步请求
				$.ajax({
					url : "userServlet",
					type : "post",
					data : "email=" + email +"&type=checkEmail",
					success : function(data) { // 会将服务器返回的数据保存到data中
						if (data == 0) {
							$("#emial_regist_span").html("邮箱可以使用");
							emailFlag = true;
						} else {
							$("#emial_regist_span").html("邮箱已经被注册");
						}
					}
				});
			});

			// 验证用户名是否被使用
			$("#name").blur(function() {
				var name = $("#name").val();
				//发送异步请求
				$.ajax({
					url : "userServlet",
					type : "post",
					data : "name=" + name +"&type=checkname",
					success : function(data) { // 会将服务器返回的数据保存到data中
						if (data == 0) {
							$("#name_regist_span").html("用户名可以使用");
							usernameFlag = true;
						} else {
							$("#name_regist_span").html("用户名不可以使用");
						}
					}
				});
			});

			// 确认密码
			$("#confpassword").blur(
					function() {
						var password = $("#password").val();
						var confpassword = $("#confpassword").val();

						if (password != null && password != ""
								&& password == confpassword) {
							passwordFlag = true;
						} else {
							$("#pass_span").html("密码不一致");
						}

					});
		});

		$("form").submit(function() {
			return usernameFlag && passwordFlag && emailFlag;
		});

		// 清除邮箱提示信息
		function clearEmailMsg() {
			var spanEle = document.getElementById("emial_regist_span");
			spanEle.innerHTML = "";
		}

		// 清除用户名提示信息
		function clearUsernameMsg() {
			var spanEle = document.getElementById("name_regist_span");
			spanEle.innerHTML = "";
		}
	</script>

























</body>
</html>